<template>
<div class="playlist-detail">

<div class="pic">
    <van-icon name="arrow-left" @click="goBack" />
    <van-image :src="picUrl" fit="cover"></van-image>
</div>

<div class="play">
    <div v-if="songId==''">
        <h2>{{title}}</h2>
        <h4>{{titleDetail}}</h4>
        <span>更新时间：{{updataTime}}</span><br>
          <van-button type="primary" class="bofang" >播放</van-button>
    </div>
    
    <div v-else>
    <audio :src="songUrl" controls></audio>
    </div>
</div>

<div class="song-list"  >
    <ul>
        <li v-for="item in songList" :key="item.topId"  @click="selectplayer(item)">

                    <h3 class="paihang">{{item.rank}} </h3>
                     <h4>{{item.title}}</h4>

             <span class="zhanbi"></span>
            <span class="songname">{{item.rankValue}}      {{item.singerName}}</span>
  
         
        </li>
    </ul>
</div>
   
</div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            songList:[],
                picUrl:"",
                songId:"",
                songUrl:"",
                title:"",
                titleDetail:"",
                updataTime:""
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
 axios.get("/jsososo/top",{
            params:{
                id:this.$route.params.id
            }
        })  
        .then(res => {
            console.log(res.data.data)
            this.songList=res.data.data.list
            this.picUrl=res.data.data.info.picUrl
            this.titleDetail=res.data.data.info.titleDetail
            this.title=res.data.data.info.title
            this.updataTime=res.data.data.update
        })
        .catch(err => {
            console.error(err); 
        })
        },
         goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    selectRankList(item){
      const id=item.topId;
      this.$router.push({path:`/Dian/${id}`})
    },
        playSong(item){
        this.songId=item.songid
        axios.get("/jsososo/song/urls",{
            params:{
                id:item.songmid
            }
        })
        .then(res => {
            console.log(res.data.data[item.songmid])
            this.songUrl=res.data.data[item.songmid]
        })
        .catch(err => {
            console.error(err); 
        })
    },
     selectplayer(item){
      const id=item.mid;
      this.$router.push({path: `/player/${id}` })
    }
       
    }
}
</script>


<style scoped>

.bofang{
   
    border-radius: .4rem;
    box-shadow: 0 6px 32px rgb(24 213 156 / 50%);
    background-color: #22d59c;
   
}
.pic{
    height: 275px;
    position: relative;
}
.paihang{
       color: #f56273;
       font-size: 20px;
       display: flex;
}
/* .van-icon{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    font-size: 40px;
} */
.van-image{
     width:250px;
    height: 275px;
}
.van-icon{
    font-size: 40px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    /* color: white; */
}
.song-list {
    display: flex;
  text-align: left;
  margin-bottom: 20px;
  padding: 0 20px;
}
.zhanbi {
  color: gray;
}
.songname{
     color: gray;
}
.song-list > ul > li {
  margin-bottom: 20px;
  text-align: left;
}
.song-list > ul > li > h4 {
  margin-bottom: 5px;
  flex: 1;
}
/* .song-list > ul > li > span {
  color: gray;
} */
.song-list span {
  margin-top: -10px;
  font-size: 15px;
}  

</style>